<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>HC Sticky</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,900">
  <link rel="stylesheet" href="demo.css">
</head>

<body class="home">

  <h1>HC Sticky</h1>

  <h3>Cross-browser plugin that makes any element on your page visible while you scroll</h3>

  <ul>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Default - bigger than window</h2>
      <p>Page with a sidebar that is bigger than window height. Sidebar should stick to the bottom of the page when scrolled down, and to the top of the page when scrolled up.</p>
      <p><a href="./demo_1.html" target="_blank">Launch Demo</a></p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Default - smaller than window</h2>
      <p>Page with a sidebar that is smaller than window height. Sidebar should stick to the top of the page when scrolled down or up.</p>
      <p><a href="./demo_2.html" target="_blank">Launch Demo</a></p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Multiple Stickies</h2>
      <p>Nice example showing multiple stickies on one page.</p>
      <p><a href="./demo_3.html" target="_blank">Launch Demo</a></p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Inner Sticker</h2>
      <p>Use <code>innerSticker</code> option to stick at a certain element. In this example, sticky will stick to the second box inside the sidebar only when you go <strong>up</strong>. When you go down it sticks to the bottom of the sidebar.</p>
      <p><a href="./demo_4.html" target="_blank">Launch Demo</a></p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Inner Sticker not following scroll</h2>
      <p>Use <code>innerSticker</code> option to stick at a certain element, and <code>followScroll:false</code> so the sidebar doesn't follow the scroll once attached. In this example, sticky will stick to the second box inside the sidebar when you go <strong>down</strong> or <strong>up</strong>.</p>
      <p><a href="./demo_5.html" target="_blank">Launch Demo</a></p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Inner Top not following scroll</h2>
      <p>Use <code>innerTop</code> option to stick after a certain distance, and <code>followScroll:false</code> so the sidebar doesn't follow the scroll once attached. In this example, sticky will stick 200px from top inside the sidebar when you go <strong>down</strong> or <strong>up</strong>.</p>
      <p><a href="./demo_6.html" target="_blank">Launch Demo</a></p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Browserify test</h2>
      <p>HC-Sticky called through browserify.</p>
      <p><a href="./demo_browserify.html" target="_blank">Launch Demo</a></p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>jQuery test</h2>
      <p>HC-Sticky called with jQuery.</p>
      <p><a href="./demo_jquery.html" target="_blank">Launch Demo</a></p>
    </li>
  </ul>

  <a href="http://somewebmedia.com" target="_blank" id="swm">Some Web Media</a>

</body>
</html>